<template>
  <div class="user-profile">
    <!-- 导航栏 -->
    <van-nav-bar fixed border title="编辑资料" left-text="返回" @click-left="$router.go(-1)" left-arrow>
      <template #right>
        <van-icon name="search" size="18" @click="$router.push('/search')" />
      </template>
    </van-nav-bar>
    <!-- /导航栏 -->

    <div class="zhuti">
      <input type="file"
             hidden
             ref="file"
             @change="onFileChange">

      <!-- 个人信息 -->
      <van-cell class="photo-cell"
                title="头像"
                is-link
                center
                @click="$refs.file.click()">
        <van-image class="avatar"
                   fit="cover"
                   round
                   :src="user.photo" />
      </van-cell>
      <van-cell title="昵称"
                :value="user.name"
                is-link
                @click="isUpdateNameShow = true" />
      <van-cell title="性别"
                :value="user.gender === 0 ? '男' : '女'"
                is-link
                @click="isUpdateGenderShow = true" />
      <van-cell title="生日"
                :value="user.birthday"
                is-link
                @click="isUpdateBirthdayShow = true" />
      <!-- 个人信息 -->
      <!-- 编辑昵称 -->
      <van-popup v-model="isUpdateNameShow"
                 style="height: 100%;"
                 position="bottom">
        <update-name v-if="isUpdateNameShow"
                     v-model="user.name"
                     @close="isUpdateNameShow = false"
                     @changename="changename" />
      </van-popup>
      <!-- /编辑昵称 -->
      <!-- 编辑性别 -->
      <van-popup v-model="isUpdateGenderShow"
                 position="bottom">
        <update-gender v-if="isUpdateGenderShow"
                       v-model="user.gender"
                       :value="user.gender"
                       @close="isUpdateGenderShow = false"
                       @updatesex="updatesex" />
      </van-popup>
      <!-- /编辑性别 -->
      <!-- 编辑生日 -->
      <van-popup v-model="isUpdateBirthdayShow"
                 position="bottom">
        <update-birthday v-if="isUpdateBirthdayShow"
                         v-model="user.birthday"
                         @close="isUpdateBirthdayShow = false"
                         @changeB="changeB" />
      </van-popup>
      <!-- /编辑生日 -->
      <!-- 编辑头像 -->
      <van-popup v-model="isUpdatePhotoShow"
                 position="bottom"
                 style="height: 100%;">
        <update-photo v-if="isUpdatePhotoShow"
                      @close="isUpdatePhotoShow = false"
                      @update-photo="user.photo = $event" />
      </van-popup>
      <!-- /编辑头像 -->
    </div>
  </div>
</template>

<script>
import UpdateName from './components/update-name'
import UpdateGender from './components/update-gender'
import UpdateBirthday from './components/update-birthday'
import UpdatePhoto from './components/update-photo'
import { mapState } from 'vuex'
export default {
  name: 'UserProfile',
  components: {
    UpdateName,
    UpdateGender,
    UpdateBirthday,
    UpdatePhoto
  },
  data () {
    return {
      user: {
        photo: '',
        name: '',
        birthday: '',
        gender: 0
      }, // 个人信息
      isUpdateNameShow: false,
      isUpdateGenderShow: false,
      isUpdateBirthdayShow: false,
      isUpdatePhotoShow: false
    }
  },
  computed: {
    ...mapState(['userdetail'])
  },
  created () {
    this.loadUserProfile()
    this.user = this.userdetail
  },
  methods: {
    loadUserProfile () {
    },
    onFileChange () {
    },
    changeB (val) {
      this.user.birthday = val
      this.$store.commit('editUserDetail', this.user)
    },
    updatesex (val) {
      this.user.gender = val
      this.$store.commit('editUserDetail', this.user)
    },
    changename (val) {
      this.user.name = val
      this.$store.commit('editUserDetail', this.user)
    }
  }
}
</script>

<style scoped lang="less">
.user-profile {
  .avatar {
    width: 60px;
    height: 60px;
  }

  .van-popup {
    background-color: #f5f7f9;
  }

  .photo-cell {
    .van-cell__value {
      display: flex;
      flex-direction: row-reverse;
    }
  }
  .zhuti{
      padding-top:100px;
  }
}
</style>
